<template>
  <div class="box" @click="btnSel" v-bind:status="status">
    <i class="iconfont icon-checkbox-unselect font48" v-if="this.status=='0'"></i>
    <i class="iconfont green icon-checkbox-selected font48" v-if="this.status=='1'"></i>
    <span class="ml15 label" v-if="checkVal">{{checkVal}}</span>
  </div>
</template>
<script>
  export default {
    /**
     * @module common/plugins/checkbox
     * @author zah
     * @description checkbox组件
     * @example <dc-checkbox :status="'1'" @boxChecked="change"></dc-cell>
     */
    /**
     * @property {String}  status          - 为1时选中，为0未选中.
     * @property {String} checkVal         -checkbox 后的描述
     */
    props: {
      status: String,
      checkVal: String
    },
    methods: {
      btnSel: function () {
        this.$emit('boxChecked');
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../assets/css/variable";
  .box {
    display: inline-block;
  }
  .label {
    font-size: px2rem(32px);
    color: #888;
  }

  .font48 {
    font-size: px2rem(48px);
  }
</style>
